import {Component, OnInit} from '@angular/core';
import {TabItem} from './shared/domain';
import {Observable} from 'rxjs';
import {NavigationEnd, Router} from '@angular/router';
import {filter, map} from 'rxjs/operators';
import {DialogService} from './dialog/services/dialog.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'imooc-pinduoduo';
  selectedIndex$: Observable<number>;

  constructor(
    private router: Router,
    private dialogService: DialogService
  ) {

  }

  ngOnInit(): void {
    this.selectedIndex$ = this.router.events
      .pipe(
        filter(ev => ev instanceof NavigationEnd),
        map((ev: NavigationEnd) => {
          const arr = ev.url.split('/');
          return arr.length > 1 ? arr[1] : 'home';
        }),
        map(path => this.getSelectedIndex(path))
      );
  }

  handleTabSelect(tab: TabItem): void {
    this.router.navigate([tab.link]);
  }

  getSelectedIndex(tab: string): number {
    return tab === 'recommend'
      ? 1
      : tab === 'category'
        ? 2
        : tab === 'chat'
          ? 3
          : tab === 'my'
            ? 4
            : 0;
  }

  removeDialog(): void {
    this.dialogService.close();
  }
}
